//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//加载自己的样式
require('./course.less')

//引入封装的dom
require('../../assets/js/dom.js')

//复用的basic
require('../../assets/css/basic.less')

//引入fonts字体图标
require('../../assets/fonts/iconfont.css')

//获取axios工具函数
const request = require('../../utils/request')

//引入tabbar渲染函数
const renderTabber = require('../../utils/tabbar')

//导入navbar
const renderNavbar = require('../../utils/navbar')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

function getMsg() {
    //如果错误显示信息提示框
    msg.style.display = 'block';

    // 计时器，1秒之后隐藏信息提示框
    setTimeout(() => {
        msg.style.display = 'none';
    }, 1000);
}

//等待dom加载完毕之后操作dom
document.ready(() => {
            renderTabber('run');
            renderNavbar('course');

            //获取dom
            const newCourse = document.querySelector('#newCourse');
            const courseList = document.querySelector('#courseList');
            const msg = document.querySelector('#msg');

            //封装函数获取数据
            function getData() {
                request.get('/api/train/courseList').then(res => {
                    //解构数据
                    let { errno, data, message } = res.data;
                    //判断
                    if (errno === 0) {
                        //渲染数据
                        render(data)
                    } else {
                        getMsg();
                        msg.innerHTML = message;
                    }
                })
            }
            //调用函数
            getData();

            //封装渲染函数
            function render(data) {
                //最新课程数据
                const dataOne = data[0];
                //定义html代码片段
                let html = ` 
                <h3>最新课程</h3>
                    <a href='./course-detail.html?id=${dataOne.courseId}' class="panel br15 shadow">
                        <img class="img" src="${API + dataOne.imgurl}" alt="" id="img1" />
                        <div class="info">
                            <div class="name">${dataOne.name}</div>
                            <div class="desc">${dataOne.desc}</div>
                        </div>
                    </a>
                `

                //最新课程渲染
                newCourse.innerHTML = html;


                // 渲染课程列表
                //获取课程列表
                const dataTwo = data.filter((v, i) => i !== 0);
                //定义html代码片段
                let html1 = `
                    ${dataTwo.map(v => `
                        <a href='./course-detail.html?id=${v.courseId}' class="course-item br15 mt20 shadow">
                            <img src="${API + v.imgurl}" alt="" class="img" />
                                <div class="info">
                                    <div class="title">${v.name}</div>
                                    <div class="desc mt5">${v.desc}</div>
                                </div>
                        </a>
                    `).join('')}`

        // 渲染页面
        courseList.innerHTML = html1;
    }
})